<template>
  <div class="element-positopn-panel" >
    <div class="title">绑定键值：</div>

    <div class="row">
      <Select style="flex: 1;" :value="key" @update:value="value => updateKey(value)" :options="options" />
    </div>
    <Divider />
    
      <div class="title">标题：</div>
      
      <div class="row">
        <Input style="flex: 1;" @update:value="value => updateKeyTitle(value)" :value="keyTitle" />
      </div>
      <Divider />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { round } from 'lodash'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/components/PPTist/store'
import useHistorySnapshot from '@/components/PPTist/hooks/useHistorySnapshot'
import Divider from '@/components/PPTist/components/Divider.vue'
import Input from '@/components/PPTist/components/Input.vue'

const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
console.log('handleElement :>> ', handleElement);
const key = ref('')
const keyTitle = ref('')
const options = [
  { label: '商品名称', value: 'goodsName' },
  { label: 'SKU', value: 'goodsSku' },
  { label: '货号', value: 'itemNo' },
  { label: '商品默认图片', value: 'primarilyImg' },
  { label: '商品主图', value: 'packImg' },
  { label: '商品副图', value: 'auxiliaryImg' },
  { label: '商品单位', value: 'goodsUnit' },
  { label: '商品尺寸', value: 'goodsSize' },
  { label: '商品包装尺寸', value: 'goodsSize' },
  { label: '成本价', value: 'costPrice' },
  { label: '批发价', value: 'wholesalePrice' },
  { label: '最低售价', value: 'upsetPrice' },
  { label: '零售价', value: 'retailPrice' },
  { label: '一件代发采购价', value: 'purchasePrice' },
  { label: '一件代发销售价', value: 'salePrice' },
  { label: '供货方式', value: 'supplyMode' },
]

watch(handleElement, () => {
  if (!handleElement.value) return
  key.value = handleElement.value.keyStr || ''
  keyTitle.value = handleElement.value.keyTitle || ''
}, { deep: true, immediate: true })


const { addHistorySnapshot } = useHistorySnapshot()

const updateKey = (value: string | number) => {
  const props = { keyStr: value }
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
const updateKeyTitle = (value: string | number) => {
  console.log('handleElement :>> ', handleElement);
  let pattern = />([^<]+)</g
  let bodyString = handleElement.value.content.replace(pattern, `>${value}<`)
  const props = { keyTitle: value, content: bodyString }
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}






</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  margin-bottom: 10px;
}

.label {
  text-align: center;
}

.btn-icon {
  margin-right: 3px;
}

.icon-btn {
  cursor: pointer;

  &.active {
    color: $themeColor;
  }
}

.text-btn {
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;

  &:hover {
    background-color: #efefef;
    border-radius: $borderRadius;
  }
}
</style>